import React, {PureComponent} from 'react'
import Icon from 'rc-ui/lib/Icon'
import * as customIcon from '../../util/icons'

const Path = Icon.Path

class Status extends PureComponent {
    constructor() {
        super()
    }

    componentDidMount() {

    }

    render() {
        const {data} = this.props
        return (
            <div className="device-control-container">
                <div className="device-control-box">
                    <div className="device-control-icon on">
                        <Icon>
                            <Path d={customIcon.run}/>
                        </Icon>
                    </div>
                    <div className="device-control-stat-text">
                        <p>正常运行<span>{data.on}</span>台</p>
                        <p>运行率<span>{data.on / data.total * 100}%</span></p>
                    </div>
                </div>

                <div className="device-control-box">
                    <div className="device-control-icon off">
                        <Icon>
                            <Path d={customIcon.error}/>
                        </Icon>
                    </div>
                    <div className="device-control-stat-text">
                        <p>机器故障<span>{data.error}</span>台</p>
                        <p>故障率<span>{data.error / data.total * 100}%</span></p>
                    </div>
                </div>

                <div className="device-control-box">
                    <div className="device-control-icon error">
                        <Icon>
                            <Path d={customIcon.error}/>
                        </Icon>
                    </div>
                    <div className="device-control-stat-text">
                        <p>机器关机<span>{data.off}</span>台</p>
                        <p>关机率<span>{data.off / data.total * 100}%</span></p>
                    </div>
                </div>
                <div className="device-control-box">
                    <div className="device-control-icon over">
                        <Icon>
                            <Path d={customIcon.warn}/>
                        </Icon>
                    </div>
                    <div className="device-control-stat-text">
                        <p>工艺超标<span>0</span>台</p>
                        <p>超标率<span>0%</span></p>
                    </div>
                </div>
            </div>
        )
    }

}

export default Status